<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <ul>
                <li v-for="(item,index) in items" :key="index">
                    <slot v-bind:item="item"></slot>
                </li>
            </ul>
        </main>
        <footer>
            <slot name="footer" v-bind:user="user"></slot>
        </footer>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class BlogPost extends Vue {
    name = 'BlogPost';
    items = [{name:"apple"},{name:"orange"},{name:"grape"}];
    user = {
        firstName:"John",
        lastName:"Connor"
    }
}
</script>

<style scoped>

</style>
